<template>
	<div class="index_container">
		<el-row :gutter="40">
			<el-col :span="24"><destoon-ad-place type="banner" ad-id="253" /></el-col>
			<el-col :span="24"><destoon-ad-place type="banner" ad-id="231" /></el-col>
			<el-col :span="12" :xs="24">
				<el-carousel class="index_focus_img" arrow="never" trigger="click" height="466px">
					<el-carousel-item v-for="(item, index) in focusImageData" :key="index">
						<a :href="item.linkAddr">
							<img :src="item.httpUrl" :alt="item.name" />
							<p>{{ item.name }}</p>
						</a>
					</el-carousel-item>
				</el-carousel>
			</el-col>
			<el-col :span="12" :xs="24"><news-Show /></el-col>
			<el-col :span="16" :xs="24">
				<content-box title="工作指导" :to="{ path: `${jobInstructionName}` }">
					<template slot="tab">
						<ul class="index_content_tab">
							<li :class="{ active: jobInstructionType === '226' }" @mouseenter="handleMouseenter('226')">战勤部</li>
							<li :class="{ active: jobInstructionType === '228' }" @mouseenter="handleMouseenter('228')">政治工作处</li>
							<li :class="{ active: jobInstructionType === '229' }" @mouseenter="handleMouseenter('229')">纪律检查委员会</li>
						</ul>
					</template>
					<div class="index_list_style job_instruction_list" v-loading="jobLoading">
						<div class="item" v-for="(item, index) in jobInstructionData" :key="index">
							<router-link :to="{ path: `${jobInstructionName}/${item.id}` }">{{ item.title }}</router-link>
						</div>
					</div>
				</content-box>
			</el-col>
			<el-col :span="8" :xs="24">
				<content-box title="通知公告" :to="{ path: '/notice/list' }">
					<div class="index_notice_show">
						<dl v-for="(item, index) in noticeData" :key="index">
							<dt>
								<span>{{ item.day }}</span>
								<p>{{ item.date }}</p>
							</dt>
							<dd>
								<router-link :to="{ path: `/notice/list/${item.id}` }">
									<font color="#f60" v-if="!!item.typeName">【{{ item.typeName }}】</font>
									{{ item.title }}
								</router-link>
							</dd>
						</dl>
					</div>
				</content-box>
			</el-col>
			<el-col :span="24"><destoon-ad-place type="banner" ad-id="232" /></el-col>
			<el-col :span="16" :xs="24">
				<content-box title="政策法规" :to="{ path: '/regulation' }">
					<div class="index_list_style index_policy_regulation">
						<div class="item" v-for="(item, index) in policiesData" :key="index">
							<router-link :to="{ path: `/regulation/list/${item.id}` }">{{ item.title }}</router-link>
						</div>
					</div>
				</content-box>
			</el-col>
			<el-col :span="8" :xs="24">
				<div class="index_leader_email">
					<el-button type="text" @click="handleSendLetter(1)">主任信箱</el-button>
					<el-button type="text" @click="handleSendLetter(2)">政委信箱</el-button>
					<el-button type="text" @click="handleSendLetter(3)">建言献策</el-button>
					<el-button type="text" @click="handleSendLetter(4)">监督举报信箱</el-button>
					<el-button type="text" @click="handleSendLetter(5)">机关业务信箱</el-button>
				</div>
			</el-col>
			<el-col :span="16">
				<content-box title="书香军营" :to="{ path: '/books/list' }">
					<span slot="tab">好书推荐</span>
					<div class="index_book_list">
						<dl v-for="(item, index) in booksData" :key="index">
							<dt>
								<router-link :to="{ path: `/books/${item.id}` }"><img :src="item.httpUrl" :alt="item.name" /></router-link>
							</dt>
							<dd>
								<router-link :to="{ path: `/books/${item.id}` }">{{ item.name }}</router-link>
								<p>{{ item.des }}</p>
							</dd>
						</dl>
					</div>
				</content-box>
			</el-col>
			<el-col :span="8">
				<content-box title="分享交流" :to="{ path: '/sharing' }">
					<div class="index_read_star">
						<div class="item" v-for="(item, index) in readstarData" :key="index">
							<router-link :to="{ path: `/sharing/${item.id}` }">{{ item.title }}</router-link>
							<span>{{ item.pubDate }}</span>
						</div>
					</div>
				</content-box>
			</el-col>
			<el-col :span="16" :xs="24">
				<content-box title="天天读报" :to="{ path: '/journal' }">
					<vue-seamless class="index_newspaper_show" :data="newspaperData" :class-option="scrollOption">
						<div class="box">
							<a v-for="(item, index) in newspaperData" :key="index" :href="item.link" target="_blank">
								<img :src="item.img" alt="" />
								<p>{{ item.label }}</p>
							</a>
						</div>
					</vue-seamless>
				</content-box>
			</el-col>
			<el-col :span="8" :xs="24">
				<content-box class="advanced_models_bg" title="先进典型" :to="{ path: '/model' }">
					<div class="index_advanced_models swiper swiper-no-swiping" id="advancedModels">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item, index) in advancedModelsData" :key="index">
								<router-link :to="{ path: '/model/' + item.id }"><img :src="item.httpUrl" :alt="item.title" /></router-link>
								<h3>
									<router-link :to="{ path: '/model/' + item.id }">{{ item.title }}</router-link>
								</h3>
								<p>{{ item.subTitle }}</p>
							</div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</content-box>
			</el-col>
			<el-col :span="24">
				<content-box title="服务E站">
					<div class="index_service_swiper swiper swiper-no-swiping" id="indexService">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item, index) in serviceData" :key="index">
								<a :href="item.linkAddr" target="_blank">
									<img :src="item.httpUrl" :alt="item.name" />
									<p>{{ item.name }}</p>
								</a>
							</div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</content-box>
			</el-col>
			<el-col :span="24">
				<content-box title="投稿统计" :to="{ path: '/statistics' }">
					<count-stat></count-stat>
				</content-box>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import moment from 'moment';
import { mapActions } from 'vuex';
import newsShow from './newsShow';
import countStat from './countStat';
import contentBox from './contentBox';
import Swiper from 'swiper/swiper-bundle';
import vueSeamless from 'vue-seamless-scroll';
import destoonAdPlace from '@/components/destoonAdPlace';
import { getOpenApiClassify } from '@/api/system/classify';
export default {
	components: { destoonAdPlace, newsShow, contentBox, countStat, vueSeamless },
	data() {
		return {
			scrollOption: {
				limitMoveNum: 2, // 开启无缝滚动的数据量(默认5)
				direction: 2 // 0向下 1向上 2向左 3向右
			},
			jobInstructionType: '226',
			armyStackRoom: 1,
			focusImageData: [],
			noticeData: [],
			policiesData: [],
			booksData: [],
			readstarData: [],
			newspaperData: [],
			advancedModelsData: [],
			serviceData: [],
			jobInstructionData: [],
			jobLoading: false
		};
	},
	computed: {
		jobInstructionName() {
			switch (this.jobInstructionType) {
				case '226':
					return '/guide/warduty';
					break;
				case '228':
					return '/guide/politics';
					break;
				case '229':
					return '/guide/discipline';
					break;
			}
		}
	},
	watch: {
		jobInstructionType: {
			handler(val) {
				this.jobLoading = true;
				this.getJobInstructionData(val);
			},
			immediate: true
		}
	},
	mounted() {
		this.getBooksData();
		this.getNoticeData();
		this.getReadstarData();
		this.getNewspaperData();
		this.getFocusImageData();
		this.getSiteServiceData();
		this.getPolicyRegulation();
		this.getAdvancedModelsData();
	},
	methods: {
		...mapActions(['getNewsData', 'getImageData', 'getJournalData']),

		//切换
		handleMouseenter(val) {
			this.jobInstructionType = val;
		},

		//获取焦点图数据
		getFocusImageData() {
			this.getImageData({ page: 1, limit: 6, columnId: '178', status: '1' }).then((res) => {
				this.focusImageData = !res.data ? [] : [...res.data];
			});
		},

		//获取工作指导数据
		getJobInstructionData(classifyId) {
			this.getNewsData({ page: 1, limit: 18, classifyId }).then((res) => {
				this.jobLoading = false;
				this.jobInstructionData = !res.data ? [] : [...res.data];
			});
		},

		//获取通知公告数据
		async getNoticeData() {
			let classifyData = await getOpenApiClassify({ classType: '1', createBy: '1', status: '1' }).then((res) => {
				return res.data.code === '0' ? res.data.data : [];
			});
			let params = { page: 1, limit: 5, classifyId: '209', sort: 'create_time desc', executiveEditorList: classifyData.map((item) => item.id).join() };

			this.getNewsData(params).then((res) => {
				let datas = !res.data ? [] : [...res.data];
				this.noticeData = datas.map((item) => {
					let momentDate = moment(item.pubDate);
					let typeName = classifyData.find((v) => v.id === item.executiveEditor);
					return {
						id: item.id,
						title: item.title,
						typeName: !typeName ? '' : typeName.name,
						day: momentDate.format('DD'),
						date: momentDate.format('YYYY-MM')
					};
				});
			});
		},

		//获取政策法规数据
		getPolicyRegulation() {
			this.getNewsData({ page: 1, limit: 14, classifyId: '204', status: '1' }).then((res) => {
				this.policiesData = !res.data ? [] : [...res.data];
			});
		},

		//获取书香军营数据
		getBooksData() {
			this.getJournalData({ page: 1, limit: 4, columnId: '214', status: '1' }).then((res) => {
				this.booksData = !res.data ? [] : [...res.data];
			});
		},

		//获取阅读之星数据
		getReadstarData() {
			this.getNewsData({ page: 1, limit: 6, classifyId: '215', status: '1' }).then((res) => {
				this.readstarData = !res.data ? [] : [...res.data];
			});
		},

		//获取天天读报数据
		getNewspaperData() {
			this.getImageData({ page: 1, limit: 10, columnId: '225', status: '1' }).then((res) => {
				let datas = !res.data ? [] : [...res.data];
				this.newspaperData = datas.map((item) => {
					return {
						id: item.id,
						label: item.name,
						img: item.httpUrl,
						link: item.linkAddr
					};
				});
			});
		},

		//获取先进典型数据
		getAdvancedModelsData() {
			this.getNewsData({ page: 1, limit: 5, classifyId: '210', status: '1' }).then((res) => {
				this.advancedModelsData = !res.data ? [] : [...res.data];
				this.$nextTick(() => {
					this.initAdvancedModels();
				});
			});
		},

		//获取服务E站数据
		getSiteServiceData() {
			this.getImageData({ page: 1, limit: 9999, columnId: '208', status: '1' }).then((res) => {
				this.serviceData = !res.data ? [] : [...res.data];
				this.$nextTick(() => {
					this.initIndexService();
				});
			});
		},

		//初始化先进典型
		initAdvancedModels() {
			new Swiper('#advancedModels', {
				grabCursor: true,
				effect: 'creative',
				creativeEffect: {
					prev: {
						shadow: true,
						translate: ['-120%', 0, -500]
					},
					next: {
						shadow: true,
						translate: ['120%', 0, -500]
					}
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			});
		},
		//初始化服务E站
		initIndexService() {
			new Swiper('#indexService', {
				slidesPerView: 8,
				spaceBetween: 30,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			});
		},

		//投放信件
		handleSendLetter(person) {
			this.$router.push({
				path: '/message',
				query: { person }
			});
			this.sendLetterDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.index_container {
	width: 100%;
	padding-top: 40px;
	overflow: hidden;
	.swiper-button-next,
	.swiper-button-prev {
		top: 36%;
		background-color: #dedede;
		&::after {
			font-size: 24px;
			color: #fff;
		}
		&:hover::after {
			color: #357c65;
		}
	}
	.swiper-button-next {
		right: 0;
	}
	.swiper-button-prev {
		left: 0;
	}
}
/*公用Tab切换*/
.index_content_tab {
	display: flex;
	align-items: center;
	li {
		font-size: 16px;
		padding: 0 10px;
		margin-right: 30px;
		&.active {
			font-weight: bold;
			color: #357c65;
		}
	}
}
/*公用文字列表*/
.index_list_style {
	padding: 15px 0;
	overflow: hidden;
	.item {
		display: flex;
		align-items: center;
		float: left;
		width: 50%;
		padding: 10px 15px;
		box-sizing: border-box;
		&::before {
			width: 6px;
			height: 6px;
			margin-right: 15px;
			flex-shrink: 0;
			background-color: #357c65;
			content: '';
		}
	}
	a {
		font-size: 16px;
		line-height: 1.6;
		text-decoration: none;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #333;
		&:hover {
			color: #357c65;
			text-decoration: underline;
		}
	}
}
//焦点图
.index_focus_img {
	margin-bottom: 40px;
	.el-carousel__item {
		a {
			position: relative;
			display: block;
		}
		img {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
		}
		p {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 48px;
			line-height: 48px;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.6);
			padding: 0 160px 0 10px;
			z-index: 2;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	::v-deep {
		.el-carousel__indicators {
			display: flex;
			align-items: center;
			height: 48px;
			right: 10px;
			left: auto;
			transform: none;
		}
		.el-carousel__indicator {
			width: 10px;
			height: 10px;
			padding: 0;
			margin: 0 5px;
			border: solid 1px #fff;
			&.is-active {
				width: 14px;
				height: 14px;
				background-color: #fff;
			}
		}
		.el-carousel__button {
			display: none;
		}
	}
}
/*工作指导*/
.job_instruction_list {
	height: 414px;
}
/*通知公告*/
.index_notice_show {
	height: 434px;
	padding: 5px 20px;
	dl {
		display: flex;
		align-items: center;
		padding: 15px 0;
		border-top: solid 1px #e5e5e5;
		&:first-child {
			border-top: none;
		}
	}
	dt {
		width: 60px;
		border: solid 1px rgba(155, 166, 171, 0.2);
		text-align: center;
		flex-shrink: 0;
		span {
			font-size: 24px;
			line-height: 1.5;
			color: #0b558a;
		}
		p {
			color: #666;
			font-size: 12px;
			line-height: 1.5;
			background-color: rgba(155, 166, 171, 0.2);
		}
	}
	dd {
		flex: 1;
		font-size: 16px;
		line-height: 28px;
		margin-left: 15px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		a {
			text-decoration: none;
			color: #333;
			&:hover {
				color: #357c65;
			}
		}
	}
}
/*政策法规*/
.index_policy_regulation {
	height: 320px;
}
/*首长信箱*/
.index_leader_email {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	height: 400px;
	padding: 100px 0 40px;
	box-sizing: border-box;
	margin-bottom: 40px;
	background: url('../../assets/img/bg_emial.png') no-repeat center top;
	background-size: cover;
	.el-button {
		font-size: 22px;
		color: #333;
		background: url('../../assets/img/icon_email.png') no-repeat center top;
		padding-top: 56px;
		margin: 0 15px;
	}
}
.index_book_list {
	padding: 10px 0;
	overflow: hidden;
	dl {
		float: left;
		width: 50%;
		box-sizing: border-box;
		padding: 10px 20px;
		display: flex;
	}
	dt {
		width: 90px;
		height: 120px;
		margin-right: 15px;
		flex-shrink: 0;
		a {
			display: block;
			width: 100%;
			height: 100%;
			perspective: 50px;
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform-origin: 0 0 0;
			transform: rotateY(2deg);
		}
	}
	dd {
		flex: 1;
		overflow: hidden;
		a {
			font-size: 18px;
			line-height: 2;
			text-decoration: none;
			color: #333;
			font-weight: bold;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			&:hover {
				color: #357c65;
			}
		}
		p {
			height: 84px;
			font-size: 16px;
			line-height: 1.75;
			color: #999;
			display: -webkit-box;
			overflow: hidden;
			line-clamp: 3;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
		}
	}
}
.index_read_star {
	height: 264px;
	margin: 18px 0;
	.item {
		display: flex;
		align-items: center;
		font-size: 16px;
		line-height: 24px;
		padding: 10px 15px;
		&::before {
			width: 6px;
			height: 6px;
			margin-right: 15px;
			flex-shrink: 0;
			background-color: #357c65;
			content: '';
		}
		a {
			flex: 1;
			color: #606266;
			text-decoration: none;
			overflow: hidden;
			&:hover {
				color: #357c65;
				text-decoration: underline;
			}
		}
		span {
			font-size: 14px;
		}
	}
}
.index_newspaper_show {
	height: 252px;
	padding: 20px;
	overflow: hidden;
	.box {
		display: flex;
	}
	a {
		display: block;
		width: 170px;
		padding: 0 10px;
		text-decoration: none;
		color: #333;
		img {
			display: block;
			width: 170px;
			height: 212px;
			object-fit: cover;
		}
		p {
			font-size: 18px;
			margin-top: 10px;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		&:hover {
			color: #357c65;
		}
	}
}
.advanced_models_bg {
	background: linear-gradient(180deg, #faefe5 0%, #ffffff 100%);
}
.index_advanced_models {
	height: 292px;
	&.swiper-3d {
		perspective: 1300px;
	}
	.swiper-wrapper {
		cursor: default !important;
	}
	.swiper-slide {
		padding: 20px 0 0;
		text-align: center;
		img {
			display: block;
			width: 296px;
			height: 186px;
			margin: 0 auto;
			object-fit: contain;
		}
		h3 {
			font-size: 18px;
			font-weight: normal;
			margin-top: 15px;
			a {
				color: #333;
				text-decoration: none;
			}
		}
		p {
			color: #999;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-top: 10px;
		}
	}
	.swiper-button-next,
	.swiper-button-prev {
		top: 45%;
	}
}
.index_service_swiper {
	height: 120px;
	padding: 0 30px;
	.swiper-slide {
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			user-select: none;
			text-decoration: none;
			color: #333;
			&:hover {
				color: #357c65;
			}
		}
		img {
			width: 48px;
			height: 48px;
		}
		p {
			font-size: 16px;
			margin-top: 16px;
		}
	}
	.swiper-button-next,
	.swiper-button-prev {
		top: 36%;
	}
}
</style>
